<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j page-list flash-sale">
    <div class="content">
      <div
        v-if="shopList.length"
        class="list-banner"
      >
        <img
          src="@/assets/images/shop-list.jpg"
          alt
        >
      </div>
      <div class="goods-list shop-list">
        <!-- 全部 -->
        <shop-item
          v-if="shopList.length"
          :shop-list="shopList"
        />
        <empty-all-tips
          v-if="isEmpty"
          :text="$t('shopInfo.noRelevant')"
          :back="$t('backToHome')"
          :src-type="6"
        />
        <!-- 页码 -->
        <pagination
          v-model="queryParams.current"
          :pages="pages"
          @change-page="getSearchShopPage"
        />
        <!-- /页码 -->
      </div>
    </div>
  </div>
</template>

<script setup>

const route = useRoute()
const router = useRouter()

watch(() => route, () => {
  getShopList()
}, { deep: true })

onMounted(() => {
  document.title = $t('shopInfo.storeList')
  getShopList()
})

const pages = ref(1) // 总页数
const isEmpty = ref(false)
const shopList = ref([]) // 店铺列表
const queryParams = reactive({
  fansCount: 0, // 粉丝数量
  intro: '', // 店铺简介
  prodCount: 0, // 商品数量
  shopId: null, // 店铺id
  shopLogo: '', // 店铺logo
  shopName: route.query.shopName || '', // 店铺名称
  current: route.query.current || 1, // 当前页
  type: route.query.type || '' // 店铺类型
})

// 获取店铺列表
const getShopList = () => {
  const query = route.query
  const param = {
    fansCount: parseInt(query.fansCount) || 0, // 粉丝数量
    intro: query.intro || '', // 店铺简介
    prodCount: parseInt(query.prodCount) || 0, // 商品数量
    shopId: parseInt(query.shopId) || null, // 店铺id
    shopLogo: query.shopLogo || '', // 店铺logo
    shopName: query.shopName || '', // 店铺名称
    current: parseInt(query.current) || 1, // 当前页
    size: 20,
    type: query.type || '',
    renovationType: 1 // 装修类型 1PC 2移动端
  }
  Object.assign(queryParams, param)
  http.get('/shop/searchShops', {
    params: param
  }).then(({ data }) => {
    pages.value = data.pages
    shopList.value = data.records
    isEmpty.value = !data.records.length
  })
}

/**
 * 请求店铺列表
 */
const getSearchShopPage = (current) => {
  router.push({
    path: '/shop-list',
    query: {
      fansCount: queryParams.fansCount || '', // 粉丝数量
      intro: queryParams.intro || '', // 店铺介绍
      prodCount: queryParams.prodCount || '', // 商品数量
      shopId: queryParams.shopId || null, // 店铺id
      shopLogo: queryParams.shopLogo || '', // 店铺logo
      shopName: queryParams.shopName || '', // 店铺名称
      current,
      size: 20,
      type: queryParams.type || ''
    }
  })
}

</script>

<style lang="scss" scoped>
@use "../list/index";
</style>

<style lang="scss" scoped>
.flash-sale {
  &:deep(.empty) {
    padding-top: 140px;
  }
}
</style>
